<template>
    <div class="topBar" v-bind:style="{'background':background}" >
        <van-icon name="arrow-left" @click="onClickLeft" size="22"/>
        <div class="font-size-18-pk h2">江湖夺宝</div>
        <van-search
            v-model="keyword"
            placeholder="请输入搜索关键词"
            slot="title"
            background="transparent"

            @search="onSearch"
        >
            <template slot="left-icon">
                <van-icon name="search" size="20"/>
            </template>
        </van-search>
    </div>
</template>

<script>
    export default {
        name: "topBar",
        props: {
            leftText: {
                type:String,
                default:""
            },
            rightText:{
                type:String,
                default: ""
            },
            //控制显示或者隐藏
            hide:{
                type : Boolean,
                default:false
            },
            // background:{
            //     type : String,
            //     default : "#FF5300"
            // }
        },
        data(){
            return {
                keyword:"",
                background:"#FF5300"
            }
        },
        created() {
            this.keyword = this.$route.query.keyword ? this.$route.query.keyword : "";
            window.addEventListener('scroll', () => {
                let scrollTop = document.documentElement.scrollTop ||
                    document.body.scrollTop;
                if(scrollTop > 250){
                    this.background = "#FF5300";
                }else{
                    this.background = "transparent";
                }
            }, true);

        },
        methods:{
            onClickLeft() {
                this.$emit("click-left")
            },
            onClickRight() {
                this.$emit("click-right")
            },
            onSearch(){
                this.$emit("search",this.keyword);
            },

            handleScroll(){

                // if(this.hideValue.hide && this.hideValue.height === e.){
                //
                // }
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "treasure";
.topBar{
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    height: 48px;
    background: $orange;
    align-items: center;
    color: #ffffff;
    z-index: 9999;

    .van-icon-arrow-left{
        padding-left: 8px;
    }
    .h2{
        margin-left: 8px;
    }
    .van-search {
        background-color: transparent;
        flex: 0 0 60%;
        .van-search__content {
            border-radius: 20px;
        }

    }
}
</style>
